<template>
  <div>
    <el-card style="width: 50%">
      <el-form :model="user" :rules="rules" ref="formRef" label-width="80px" style="padding-right: 20px">
        <el-form-item label="原密码" prop="password">
          <el-input v-model="user.password" style="width: 50%" show-password placeholder="请输入原密码"  ></el-input>
        </el-form-item>
        <el-form-item label="旧密码" prop="newPassword">
          <el-input v-model="user.newPassword" style="width: 50%;" show-password placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="user.confirmPassword" style="width: 50%" show-password placeholder="请确认密码"></el-input>
        </el-form-item>
        <el-form-item >
          <div style="text-align: center; margin-bottom: 20px">
            <el-button type="primary" @click="update">确认修改</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import ValidCode from "@/components/ValidCode.vue";
import {User, Lock, EditPen} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

export default {
  name: "Password",
  data() {
    const validatePass = (rule, confirm, callback) => {
      if (confirm === '') {
        callback(new Error('请确认密码'));
      } else if (confirm !== this.user.newPassword){
        callback(new Error('密码不一致'));
      } else {
        callback();
      }
    };
    return {
      user : JSON.parse(localStorage.getItem('honey-user') || '{}'),
      rules: {
        password:[
          {required:true,message:'请输入账号',trigger:'blur'},
          {min:3,max:10,message:'长度在3到10个字符',trigger:'blur'}
        ],
        newPassword:[
          {required:true,message:'请输入密码',trigger:'blur'},
          {min:3,max:10,message:'长度在3到10个字符',trigger:'blur'}
        ],
        confirmPassword:[
          {validator:validatePass,required:true,trigger:'blur'},
        ]
      }
    }
  },
  methods: {
    update(){
      this.$refs.formRef.validate((valid) => {
        if (valid) {
        this.user.password = this.user.newPassword;
        request.put('user/update', this.user).then(response => {
          if (response.code === 1) {
            ElMessage.success('修改成功,请登录');
            this.$router.push('/login');
          } else {
            ElMessage.error(response.msg);
          }
        })
      }
      })
    },
  }
}
</script>

<style scoped>
/deep/.el-form-item__error {
  font-weight: bold;
}

/deep/.el-upload {
  border-radius: 50%;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;

}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
#el-id-1426-2{

}
</style>